<template>
  <div>
    <a-card :bordered="true">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="合同号" name="contractNo"/>
        <f-search-form-item label="合同名称" name="contractName" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" rowKey="undefined" :columns="columns" :exportBtn="true" :multiple="false"
               :operator="operator"
               :params="queryParam"
               :api="api.srmContracts"
               :selectedRowKeys="contractsId"
               :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
               :customRow="customRow"
               :scroll="{ x: 1300, y: 500 }"
      >
        <!-- 变更标识 -->
        <a-tag v-if="changeFlag === 'Y'" color="volcano" slot="changeFlag" slot-scope="changeFlag">
          {{ '是' }}
        </a-tag>
        <a-tag v-else color="geekblue" slot="changeFlag" slot-scope="changeFlag">
          {{ '否' }}
        </a-tag>
        <!-- 状态标识 -->
        <a-tag v-if="status === 0" color="geekblue" slot="status" slot-scope="status">
          {{ '新建' }}
        </a-tag>
        <a-tag v-else-if="status === 1" color="geekblue" slot="status" slot-scope="status">
          {{ '待确认' }}
        </a-tag>
        <a-tag v-else-if="status === 2" color="volcano" slot="status" slot-scope="status">
          {{ '确认不过' }}
        </a-tag>
        <a-tag v-else-if="status === 3" color="geekblue" slot="status" slot-scope="status">
          {{ '待审' }}
        </a-tag>
        <a-tag v-else-if="status === 4" color="volcano" slot="status" slot-scope="status">
          {{ '审核不过' }}
        </a-tag>
        <a-tag v-else-if="status === 5" color="green" slot="status" slot-scope="status">
          {{ '执行' }}
        </a-tag>
        <a-tag v-else-if="status === 6" color="green" slot="status" slot-scope="status">
          {{ '关闭' }}
        </a-tag>
        <a-tag v-else color="volcano" slot="status" slot-scope="status">
          {{ '作废' }}
        </a-tag>
      </f-table>
      <contracts-drawer ref="drawer"></contracts-drawer>
    </a-card>

    <div v-if="visible">
      <a-modal
        title="项目选择"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <span>项目名称：</span>
        <a-select
          style="width: 400px; margin-bottom: 15px"
          showSearch
          optionFilterProp="children"
          @change="valueChange"
        >
          <a-select-option v-for="item in projectList" :key="item.projectId" :value="item.projectId">
            {{ item.projectName }}
          </a-select-option>
        </a-select>
      </a-modal>
    </div>
  </div>
</template>
<script>
  import contractsDrawer from './contracts_drawer.vue'
  import api from './js/api'

  export default {
    name: 'TableList',
    components: {
      contractsDrawer
    },
    data() {
    const me = this
    //操作按钮
    const operator = []
    operator.push({
      name: '测试数据删除',
      icon: 'delete',
      that: this,
      handler: function (table, that) {
        that.visible = true
      },
    })
    operator.push({
      name: '手动同步供应商信息',
      icon: 'sync',
      that: this,
      handler: function (table, that) {
        that.http.get(this, {
          url: that.api.srmContracts.syncVendorInfo,
          data: {},
          success(me, data) {
           me.$message.success('同步完成')
          },
        })
      },
    })
      return {
        projectId: '',
        projectList: [],
        api: Object.assign(api, this.api),
        visible: false,
        confirmLoading: false,
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '合同状态',
            align: 'center',
            dataIndex: 'status',
            width: 100,
            scopedSlots: { customRender: 'status' },
            sorter: (a, b) => a.status.length - b.status.length
          },
          {
            title: '合同号',
            align: 'center',
            dataIndex: 'contractNo',
            width: 150,
            sorter: (a, b) => a.contractNo.length - b.contractNo.length
          },
          {
            title: '项目编码',
            align: 'center',
            width: 150,
            dataIndex: 'projectCode',
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '供应商名称',
            align: 'center',
            width: 200,
            dataIndex: 'vendorName',
            sorter: (a, b) => a.vendorName.length - b.vendorName.length
          },
          {
            title: '合同未税总金额',
            align: 'center',
            width: 150,
            dataIndex: 'contractAllNoTaxAmount',
            sorter: (a, b) => a.contractAllNoTaxAmount.length - b.contractAllNoTaxAmount.length
          },
          {
            title: '合同总金额',
            align: 'center',
            width: 150,
            dataIndex: 'contractallAmount',
            sorter: (a, b) => a.contractallAmount.length - b.contractallAmount.length
          },
          {
            title: '是否变更',
            align: 'center',
            width: 100,
            dataIndex: 'changeFlag',
            scopedSlots: { customRender: 'changeFlag' },
            sorter: (a, b) => a.changeFlag.length - b.changeFlag.length
          },
          {
            title: '累计变更金额',
            align: 'center',
            width: 150,
            dataIndex: 'changeAmount',
            sorter: (a, b) => a.changeAmount.length - b.changeAmount.length
          },
          {
            title: '预算总金额',
            align: 'center',
            width: 150,
            dataIndex: 'budgetAmount',
            sorter: (a, b) => a.budgetAmount.length - b.budgetAmount.length
          },
          {
            title: '承诺占用金额',
            align: 'center',
            width: 150,
            dataIndex: 'occupancyAmount',
            sorter: (a, b) => a.occupancyAmount.length - b.occupancyAmount.length
          },
          {
            title: '实际成本金额',
            align: 'center',
            width: 150,
            dataIndex: 'actualcostAmount',
            sorter: (a, b) => a.actualcostAmount.length - b.actualcostAmount.length
          },
          {
            title: '货币代码',
            align: 'center',
            width: 150,
            dataIndex: 'currencyCode',
            sorter: (a, b) => a.currencyCode.length - b.currencyCode.length
          },
          {
            title: '流水号',
            align: 'center',
            dataIndex: 'contractsId',
            width: 100,
            sorter: (a, b) => a.contractsId.length - b.contractsId.length
          }
          // {
          //   title: '合同金额',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'contactsDecimal'
          // },
          // {
          //   title: '合同名称',
          //   align: 'center',
          //   dataIndex: 'contractName',
          //   width: 150
          // },
          // {
          //   title: '采购组编码',
          //   align: 'center',
          //   dataIndex: 'purchasingOrgCode',
          //   width: 150
          // },
          // {
          //   title: '采购组名称',
          //   align: 'center',
          //   dataIndex: 'purchasingOrgName',
          //   width: 150
          // },
          // {
          //   title: '公司名称',
          //   align: 'center',
          //   dataIndex: 'companyName',
          //   width: 180
          // },
          // {
          //   title: '公司代码',
          //   align: 'center',
          //   dataIndex: 'companyCode',
          //   width: 150
          // },
          // {
          //   title: '供应商编码',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'vendorErpCode'
          // },
          // {
          //   title: '税率值',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'taxrateValue'
          // },
          // {
          //   title: '税率编码',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'taxrateCode'
          // },
          // {
          //   title: '合同类型',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'contractType'
          // },
          // {
          //   title: '创建时间',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'createTime'
          // },
          // {
          //   title: '签约时间',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'signDate'
          // },
          // {
          //   title: '生效时间',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'effectiveDate'
          // },
          // {
          //   title: '失效时间',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'inValidDate'
          // },
          // {
          //   title: '附件ID',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'uploadFileGroupid'
          // },
          // {
          //   title: '创建人',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'createUserName'
          // },
          // {
          //   title: '创建人ID',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'createUserId'
          // },
          // {
          //   title: '项目名称',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'projectName'
          // },
          // {
          //   title: '货币名称',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'currencyName'
          // },
          // {
          //   title: '是否紧急',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'isUrgent'
          // },
          // {
          //   title: '申请人',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'applicantName'
          // },
          // {
          //   title: '申请日期',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'applicantDate'
          // },
          // {
          //   title: '采购组名称',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'purchasingGroupName'
          // },
          // {
          //   title: '联系人姓名',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'contactsName'
          // },
          // {
          //   title: '供应商地址',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'vendorAddress'
          // },
          // {
          //   title: '交货地址',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'deliveryAddress'
          // },
          // {
          //   title: '代购班组',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'purchasingAgent'
          // },
          // {
          //   title: '项目材料员',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'projectMaterialStaff'
          // },
          // {
          //   title: '材料员邮箱',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'materialStaffEmail'
          // },
          // {
          //   title: '材料员联系电话',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'materialStaffPhone'
          // },
          // {
          //   title: '指定收货人',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'designatedConsignee'
          // },
          // {
          //   title: '收货人邮箱',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'designatedConSigneeEmail'
          // },
          // {
          //   title: '收货人联系电话',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'designatedConSigneePhone'
          // },
          // {
          //   title: '合同金额',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'contractAmount'
          // },
          // {
          //   title: '运费包装',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'freightAmount'
          // },
          // {
          //   title: '折扣总金额',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'discountAmount'
          // },
          // {
          //   title: '付款方式',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'paymentMethod'
          // },
          // {
          //   title: '需求申请人',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'demandApplicant'
          // },
          // {
          //   title: '知会人员',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'notifyStaff'
          // },
          // {
          //   title: '工作范围',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'workinGrange'
          // },
          // {
          //   title: '施工周期字段',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'constructionPeriod'
          // },
          // {
          //   title: '意见',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'opinionSandReasons'
          // },
          // {
          //   title: '申请人编码',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'demandApplicantCode'
          // },
          // {
          //   title: '工程包金额',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'engineeringPackageDecimal'
          // },
          // {
          //   title: '采购组编码',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'purchasingGroupcode'
          // },
          // {
          //   title: '质保期',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'qualityGuaranteePeriod'
          // },
          // // {
          // //   title: '代购商id',
          // //   align: 'center',
          // //   width: 150,
          // //   dataIndex: 'purchasingAgentid'
          // // },
          // // {
          // //   title: '申请人id集',
          // //   align: 'center',
          // //   width: 150,
          // //   dataIndex: 'notifyStaffid'
          // // },
          // {
          //   title: '修改日期',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'modifyTime'
          // },
          // {
          //   title: '修改人ID',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'modifyUserid'
          // },
          // {
          //   title: '修改人',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'modifyUserName'
          // },
          // {
          //   title: '客户端编码',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'clientCode'
          // },
          // {
          //   title: '班组',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'teamName'
          // },
          // {
          //   title: '班组id',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'teamId'
          // },
          // {
          //   title: '联系电话',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'contactsNumber'
          // },
          // {
          //   title: '工程包号',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'engineeringPackageNumber'
          // },
          // {
          //   title: '付款条件',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'paymentTermScode'
          // },
          // {
          //   title: '合同未税金额',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'contractNoTaxAmount'
          // },
          // {
          //   title: '累计变更未税金额',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'changenotaxAmount'
          // },
          // {
          //   title: '预算占用',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'budgetOccupancy'
          // },
          // {
          //   title: '提议状态',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'suggestStatus'
          // },
          // {
          //   title: '权限ID组',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'auditorIds'
          // },
          // {
          //   title: '过账日期',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'postingDate'
          // },
          // {
          //   title: '专业分类',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'materialKindCode'
          // },
          // {
          //   title: '供应商类型',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'vendorType'
          // },
          // {
          //   title: '工程子包',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'packageMasterSub'
          // },
          // {
          //   title: '工程包',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'packageMaster'
          // },
          // {
          //   title: '更新时间',
          //   align: 'center',
          //   width: 150,
          //   dataIndex: 'updateTime'
          // },
          // {
          //   title: '操作',
          //   align: 'center',
          //   width: 150,
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        operator: operator,
        selectedRowKeys: [],
        contractsId: ''
      }
    },
    filters: {
      format(time) {
        return formatDate(time, 'yyyy-MM-dd')
      },
      format2(time) {
        return formatDate2(time, 'yyyy-MM-dd')
      },
      formatSyncStatus(syncStatus) {
        return formatSyncStatus(syncStatus)
      }
    },
    created() {
      this.getProjectList()
    },
    methods: {
      customRow(record, index) {
        return {
          on: {
            click: (e) => {
              console.log(record, index)
              this.selectedRowKeys = [index]
              this.selectedRows = [record]
              this.$refs.drawer.showDrawer(record)
            }
          }
        }
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleOk(e) {
        this.confirmLoading = true
        this.delData(this.projectId)
        setTimeout(() => {
          this.confirmLoading = false
          this.visible = false
        }, 2000)
      },
      handleCancel(e) {
        this.visible = false
      },
      valueChange(val) {
        this.projectId = val
      },
      getProjectList() {
        this.http.get(this, {
          url: this.api.srmContracts.getProjectLists,
          data: {},
          success(me, data) {
            me.projectList = data
          },
        })
      },
      delData(val) {
        this.http.get(this, {
          url: this.api.srmContracts.delProject,
          data: {
            projectId: val
          },
          success(me, data) {
            console.info("123")
          },
        })
      }
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    }
  }
</script>
